/**
 * Description
 *
 * Creation Date 15/12/2017
 * @author Candy
 */
import React, { PureComponent } from 'react';
import {
	StyleSheet,
	View,
	Image
} from 'react-native';
import Swiper from 'react-native-swiper';
import { screen, color } from '../utils'


export default class ImageSwiper extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			swiperVisible: false
		}
	}

	componentDidMount() {
		setTimeout(() => {
			this.setState({ swiperVisible: true })
		}, 100)
	}

	render() {
		const { swiperVisible } = this.state;
		const { banners } = this.props;
		return (
			<View style={ styles.wrapper }>
				{
					swiperVisible && banners && banners.length > 0 && (
						<Swiper style={styles.slide}
								dot={<View style={{backgroundColor: color.white, width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
								activeDot={<View style={{backgroundColor: color.theme, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
								paginationStyle={{
									bottom: 8,
								}}
								loop
								autoplay
								removeClippedSubviews={false}
								scrollEnabled={true}
						>
							{
								banners.map((item, index) => (
									<View style={styles.wrapper} key={index}>
										<Image style={styles.image} resizeMode='stretch'  source={{ uri: item.banner_url + '?param=500y200' }} />
									</View>
								))
							}
						</Swiper>
					)
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	wrapper: {
		flex: 1,
		height: screen.width / 2.5
	},
	slide: {
		flex: 1,
		width: screen.width,
		height: screen.width / 2.5,
		backgroundColor: 'transparent'
	},
	image: {
		width: screen.width,
		height: screen.width / 2.5
	}
})
